<template>
    <div class="edit_goods">
        <header>编辑商品分类</header>
        <div class="form_contents">
            <div class="store common">
                <p>所属门店：</p>
                <el-select v-model.trim="input1" placeholder="请选择" style="width:300px;" @change="getCompId()">
                    <el-option v-for="item in options1" :key="item.COMPID" :label="item.label" :value="item.SHOPNAME">
                    </el-option>
                </el-select>
            </div>
            <div class="cla_number common">
                <p>分类编号：</p>
                <el-input v-model.trim="input2" style="width:467px;" placeholder="请输入数字编号"></el-input>
            </div>
            <div class="cla_name common">
                <p>分类名称：</p>
                <el-input v-model.trim="input3" style="width:467px;"></el-input>
            </div>
            <div class="sorts common">
                <p>排列顺序：</p>
                <el-input v-model.trim="input4" style="width:467px;" placeholder="请输入数字"></el-input>
            </div>
            <div class="business_status common">
                <p>营业状态：</p>
                <el-radio v-model="radio1" label="1">启用</el-radio>
                <el-radio v-model="radio1" label="0">停用</el-radio>
            </div>
            <div class="buttons common">
                <el-button type="danger" style="background:#e7251a;" @click="saveGoods">提交</el-button>
                <el-button>取消</el-button>
            </div>
        </div>

    </div>
</template>

<script>
import { saveCafeType, getSelectShop } from "@/api/manages";

export default {
    name: "edit_goods",
    data() {
        return {
            input1: "", //所属门店
            compID: "", // 门店门店ID
            input2: "", //分类编号
            input3: "", //分类名称
            input4: "", //排列顺序
            radio1: "1", //1-启用 0-停用
            options1: [] //门店下拉列表
        };
    },
    computed: {},
    methods: {
        saveGoods() {
            // 验证是否有填写
            if (this.compID === "" || this.input1 === "") {
                this.$alert("请选择门店", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (!/^\d+$/.test(this.input2)) {
                this.$alert("请填写分类编号", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (this.input3 === "") {
                this.$alert("请填写分类名称", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (!/^\d+$/.test(this.input4)) {
                console.log(123)
                this.$alert("请填写排列顺序", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (this.radio1 !== "1" && this.radio1 !== "0") {
                this.$alert("请选择营业状态", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            saveCafeType({
                COMPID: this.compID,
                SECONDCLASS: this.input2,
                SUBJECT: this.input3,
                SORTNUM: this.input4,
                STATUS: this.radio1,
                CAFETYPEID: this.input2
            }).then(res => {
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
                setTimeout(()=> {
                    this.$router.push("/manages/goodsClassify");
                },1500)
            });
        },
        // 获取选择当前门店ID
        getCompId() {
            this.options1.forEach(item => {
                if (item.SHOPNAME === this.input1) {
                    this.compID = item.COMPID;
                }
            });
        }
    },
    created() {
    	//离开页面提醒
    	window.onbeforeunload = function(e) {
            var e = window.event || e;
            e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
        }
        //载入时获取门店下拉列表数据
        getSelectShop({
            LIKESTR: "",
            PAGE_NO: "1",
            PAGE_SIZE: "100"
        }).then(res => {
            if (res.data.STATUS_CODE === 1) {
                this.options1 = res.data.SHOPARR;
                this.getCompId();
            }
        });

        let curGoods = this.$store.state.goods.goodsDetail;
        this.input1 = curGoods.SHOPNAME;
        this.input2 = curGoods.CAFETYPEID;
        this.input3 = curGoods.SUBJECT;
        this.input4 = curGoods.SORTNUM;
        this.radio1 = curGoods.STATUS + "";
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-button {
    margin: 0 15px;
}
.edit_goods {
    header {
        background: #fff;
        font-size: 22px;
        font-weight: 700;
        padding: 20px;
    }
    .form_contents {
        padding-bottom: 40px;
        p {
            white-space: nowrap;
            width: 150px;
            text-align: right;
        }
        width: 97%;
        margin: 25px auto;
        background: #fff;
        padding-top: 40px;
        .common {
            width: 50%;
            margin: 26px auto;
            display: flex;
            align-items: center;
        }
        .buttons {
            width: 30%;
        }
    }
}
</style>
